<link rel="stylesheet" href="/assets/home/css/index.css" />
<link rel="stylesheet" href="/assets/home/css/swiper-bundle.css">
<script src="/assets/home/js/swiper-bundle.min.js"></script>


<!-- 轮播图 -->
<!-- 条件判断。如果有轮播图，就走进来执行里面循环结构 -->
{if condition="$top"}
<div class="mui-content">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <!-- 在这里做轮播图的遍历 -->
            {foreach $top as $item}
            <div class="swiper-slide">
                <!-- 点击轮播图，请打开课程详情页。但是是哪个课程的呢？不知道。所以就要加上这个传过去的课程id才能确认 -->
                <a href="{:url('home/subject/info',['subid' => $item['id']])}">
                    <img src="{$item.thumbs}" />
                    <p class="mui-slider-title">{$item.title}</p>
                </a>
            </div>
            {/foreach}
        </div>
        <div class="swiper-pagination" style="text-align: right;"></div>
    </div>
</div>
{/if}

<!-- 菜单 -->
<div class="menulist">
    <div class="item">
        <a href="live.html">
            <img src="/assets/home/images/live.png" alt="">
            <div class="name">课程直播</div>
        </a>
    </div>

    <div class="item">
        <a href="comment_list.html">
            <img src="/assets/home/images/comment.png" alt="">
            <div class="name">学员评论</div>
        </a>
    </div>

    <div class="item">
        <a href="ranking.html">
            <img src="/assets/home/images/ranking.png" alt="">
            <div class="name">课程榜单</div>
        </a>
    </div>

    <div class="item">
        <!-- 首页点击领取优惠，跳转到这个地址优惠列表页这里 -->
        <a href="{:url('home/coupon/index')}">
            <img src="/assets/home/images/coupon.png" />
            <div class="name">领取优惠</div>
        </a>
    </div>
</div>

<!-- 精选课程 -->
<!-- 条件判断。如果有轮播图，就走进来执行里面循环结构，做ui列表的输出 -->
{if condition="$subject"}
<div class="list">
    <div class="title">精选课程</div>
    <ul>
        {foreach $subject as $item} <!-- 原来有10个，现在保留一个，用循环遍历把其余9个输出来 -->
        <li>
            <a href="{:url('home/subject/info',['subid' => $item['id']])}"><!-- 双引号内放的东西，点击课程后跳转的路径 -->
                <div class="imgs">
                    <img class="mui-media-object" src="{$item.thumbs}" />
                </div>
                <div class="mui-media-body">{$item.title}</div>
                <div class="info">
                    <div class="price">￥{$item.price}</div>
                    <div class="like">
                        {$item.likes_text}
                        <img src="/assets/home/images/thumbs-up.png" alt="" />
                    </div>
                </div>
            </a>
        </li>
        {/foreach}
    </ul>
</div>
{/if}

<!-- 精选名师 -->
{if condition="$teacher"}
<div class="list teacher">
    <div class="title">精选名师</div>
    <ul>
        {foreach $teacher as $item}
        <li>
            <!-- a链接传当下这个html的视图过去时，要看那边的html视图的相对应的控制器接受的id是什么。例如，
             ['teacherid'=>$item['id']]把这里的id传过去，那边的控制器接收的是teacherid，所以这里就要写 -->
            <a href="{:url('home/teacher/info',['teacherid'=>$item['id']])}">
                <div class="imgs">
                    <img class="mui-media-object" src="{$item.avatar_text}">
                </div>
                <div class="mui-media-body">{$item.name}</div>
                <div class="info">
                    <div class="num">课程：7</div>
                    <div class="like">
                        <!-- 在application/common/model/suject/teacher.php模型的虚拟字段和获取器getFollowsTextAttr($value, $data),
                         传过来follows_text的虚拟字段的数值 -->
                        {$item.follows_text}
                        <img src="/assets/home/images/like.png" alt="" />
                    </div>
                </div>
            </a>
        </li>
        {/foreach}

    </ul>
</div>
{/if}

<!-- 底部 -->
{include file="common/footer"/}



<script>
    var swiper = new Swiper(".mySwiper", {
        pagination: {
            el: ".swiper-pagination",
        },
    });
</script>